<template>
  <div style="height: 100%;">
    <el-container style="background: #ececec;height: 100%;">
      <el-aside width="220px" style="background: #232d36;">
        <img style="width: 220px;height: 104px;" src="../../static/image/logo.png"/>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          background-color="#232d36"
          text-color="#fff"
          style="border: none"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/index/orderList">
              <i class="el-icon-message"></i>
              <span slot="title">类别管理</span>
            </el-menu-item>
            <el-menu-item index="/index/orderList">
              <i class="el-icon-message"></i>
              <span slot="title">商品列表</span>
            </el-menu-item>
            <el-menu-item index="/index/orderList">
              <i class="el-icon-message"></i>
              <span slot="title">商品评论</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/index/userList">
            <i class="el-icon-menu"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="/index/comment">
            <i class="el-icon-document"></i>
            <span slot="title">统计管理</span>
          </el-menu-item>
          <el-menu-item index="/index/adminList">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </el-menu-item>
          <el-menu-item index="/index/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">会员管理</span>
          </el-menu-item>
          <el-menu-item index="/index/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">商城信息</span>
          </el-menu-item>
          <el-menu-item index="/index/menuManage">
            <i class="el-icon-tickets"></i>
            <span slot="title">菜单设置</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span>公众号管理</span>
            </template>
            <el-menu-item index="/index/orderList">
              <i class="el-icon-message"></i>
              <span slot="title">消息管理</span>
            </el-menu-item>
            <el-menu-item index="/index/orderList">
              <i class="el-icon-message"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/index/materialManage">
              <i class="el-icon-message"></i>
              <span slot="title">素材管理</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-container style="padding: 20px 24px;">
        <el-header class="headerStyle" height="64px">
          <div style="font-size: 25px;">小闲图书馆公众号后台管理系统</div>
          <div class="userInfo">
            <span>欢迎：<span style="color: red">王小虎</span></span>
            <span style="margin-left: 20px;cursor: pointer;" @click="handleExit">退出</span>
          </div>
        </el-header>
        <el-main style="padding:20px;margin-top: 20px;background: #fff;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import app from '../appMethod';
  import Vue from 'vue';
  import {
    Container,
    Aside,
    Header,
    Main,
    Table,
    TableColumn,
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    MessageBox
  } from 'element-ui';
  import ElContainer from "../../node_modules/element-ui/packages/container/src/main.vue";
  import ElAside from "../../node_modules/element-ui/packages/aside/src/main.vue";
  import ElHeader from "../../node_modules/element-ui/packages/header/src/main.vue";
  import ElMain from "../../node_modules/element-ui/packages/main/src/main.vue";

  Vue.use(Container);
  Vue.use(Aside);
  Vue.use(Header);
  Vue.use(Main);
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(Menu);
  Vue.use(Submenu);
  Vue.use(MenuItem);
  Vue.use(MenuItemGroup);
  export default {
    components: {
      ElMain,
      ElHeader,
      ElAside,
      ElContainer
    },
    data() {
      const item = {
        date: '2016-05-02',
        name: 'cbl',
        address: '广东省英德市'
      };
      return {
        tableData: Array(15).fill(item),
        isCollapse: false
      }
    },
    methods: {
      //处理退出事件
      handleExit: function () {
        const _this = this;
        MessageBox.confirm('是否退出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          _this.$router.push('/');
          app.alert('退出成功！', 'success', 1);
        }).catch(() => {
          app.alert('取消退出！', 'error', 1);
        })
      },
      /**
       * 跳转路由
       * @param key
       * @param keyPath
       */
      handleSelect(key, keyPath) {
        this.$router.push(key);
      }
    }
  }
</script>
<style scoped>
  .headerStyle {
    height: 64px;
    line-height: 64px;
    color: #fff;
    background: #404040;
    text-align: center;
    position: relative;
  }

  .userInfo {
    position: absolute;
    width: 200px;
    right: 0;
    top: 0px;
  }
</style>
